<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 90px;
            height: 25px;
            color: red;
            border: 1px solid black;
            text-align: center;
            line-height: 1;
            float: left;
            margin: 15px 0 0 25px;
            
        }
        .bigBox{
            width: 200px;
            height: 100px;
            margin:200px auto;
            background-color: yellow;
        }
        .button{
            width: 50px;
            height: 27px;
            background-color: pink;
            border: none;
            float: left;
            margin: 15px 0 0 15px;
        }
        .text{
            width: 90px;
            height: 25px;
            color: red;
            border: 1px solid black;
            text-align: center;
            line-height: 1;
            float: left;
            margin: 15px 0 0 25px;
            background: none;
        }  
        .submit{
            width: 50px;
            height: 27px;
            background-color: orange;
            border: none;
            float: left;
            margin: 15px 0 0 15px;
        }
    </style>
</head>
<body>
    <div class="bigBox">
        <div class="box"></div>
        <input type="button" value="刷新" class="button">
    <form action="">
        <input type="text" placeholder="请输入验证码" class="text">
        <input type="submit" value="确定" class="submit">
    </form>
    </div>
    <script>
        var btn = document.querySelector('.button')
        var divBox = document.querySelector('.box')
        var sub = document.querySelector('.submit')
        var text = document.querySelector('.text')
        
        fun()
        function fun(){
            // 列出验证码组成的元素
            var str='1234567890abcdefghijklmnopqrstuvwxyz'

            var a = '' 
        // 循环找到随机的元素 组成验证码
        for(i = 1 ; i<=6; i++){
            // 在str的length范围内查找
            var rd = parseInt(Math.random()*str.length) 
            // var rd = parseInt(Math.random()*10) 
            console.log(rd);  
            console.log(str[rd]);         
            a +=str[rd]
        }
        // 修改divBox的文本
        divBox.innerHTML = a
    }
            
        // 刷新按钮点击执行数据
        btn.onclick = function(){
            fun()
        }
        // 提交按钮点击执行数据
        sub.onclick = function(e){
        var res = text.value
        var res1 = divBox.innerHTML
        // 判断是否相等
        if(res === res1){
            alert('输入正确')
        }else{
            alert('请输入正确验证码')
        }
        }
    </script>
</body>
</html>